<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    class="demo-ruleForm"
  >
    <el-row type="flex" justify="center">
      <el-col :span="5">
        <el-form-item prop="username">
          <el-input
            type="text"
            placeholder="请输入用户名"
            required="required"
            v-model="ruleForm.username"
            prefix-icon="el-icon-user-solid"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="5">
        <el-form-item prop="password">
          <el-input
            type="password"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            v-model="ruleForm.password"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>

<!-- 增加验证码区域 -->
    <el-row type="flex" justify="center">
      <el-col :span="5">
        <el-form-item prop="verifycode">
          <el-input
            type="verifycode"
            placeholder="请输入验证码"
            prefix-icon="el-icon-circle-check"
            v-model="ruleForm.verifycode">
          </el-input>
          
          <el-image
           style="width: 100px; height: 50px"
           :src="ruleForm.newurl"
           @click="checkverifycode()"
           :fit="fit">
           </el-image>

        </el-form-item>
      </el-col>
    </el-row>


    <el-row type="flex" justify="center">
      <el-col :span="5">
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >登录</el-button
          >
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        password: "",
        verifycode:"",
        newurl: "http://localhost:8080/user/checkCodeServlet",


      },
      rules: {

        

        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],

        verifycode: [{ required: true, message: "请输入验证码", trigger: "blur" }],

      },
      
     
    };
  },
     methods: {
      //切换验证码图片
          checkverifycode(){
          this.ruleForm.newurl="/user/checkCodeServlet?t="+ new Date().getTime()
          },

    
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let parmaer = `username=${this.ruleForm.username}&password=${this.ruleForm.password}&verifycode=${this.ruleForm.verifycode}`;
          let url = "/user/loginServlet";
          axios.post(url, parmaer).then((resp) => {
            // console.log(resp.data)
            if (resp.data) {
              // console.log(true)
              location.href = "#/success";
            }else if(resp.data===0){
              this.$message.error("抱歉，验证码有误，请重新输入");

            } else {
              // console.log("dsada")
              this.$message.error("抱歉，用户名或密码有误，请重新输入");
            }
          });
          //TODO:向后台发送异步请求，携带请求数据完成登录
        } else {
          //表单校验失败
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style>
</style>